import {
  StyleSheet,
  ImageBackground,
  Text,
  FlatList,
  ToastAndroid,
  BackHandler,
  View,
  Image,
  Button,
  Modal,
  TextInput,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  PixelRatio,
  Platform,
  Share,
  Animated
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './pages/Home';
import Detail from './pages/Detail';
import User from './pages/User';
import Provider, { useInstall } from './context';
import Slide from './Slide';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
import './global';
const TabBar = () => (
  <Tab.Navigator
    screenOptions={
      {
        headerStyle: {
          backgroundColor: '#ccc'
        },
        headerTitleAlign: 'center',
        headerTintColor: 'red',
        tabBarActiveTintColor: 'red',
        // tabBarActiveBackgroundColor: '#ccc'
        // tabBarLabelStyle: {fontSize: 16}
        tabBarStyle: { backgroundColor: '#ccc' }
      }
    }
  >
    <Tab.Screen
      options={{
        title: '首页',
        tabBarIcon: ({ color, size }) => (
          <AntDesign
            name='home'
            color={color}
            size={size}
          />
        )
      }}
      name='Home'
      component={Home}
    />
    <Tab.Screen
      options={{
        title: '用户中心',
        tabBarIcon: ({ color, size }) => (
          <AntDesign
            name='user'
            color={color}
            size={size}
          />
        )
      }}
      name='User'
      component={User}
    />
  </Tab.Navigator>
)

const Container = () => {
  const { isInstall } = useInstall();

  return <NavigationContainer>
    <Stack.Navigator>
    
      {
      isInstall? 
        <Stack.Screen
          options={{headerShown: false}} 
          name='Root' 
          component={TabBar} 
        />:
        <Stack.Screen name='Slide' component={Slide} />
      }
      <Stack.Screen name='Detail' component={Detail} />
    </Stack.Navigator>
  </NavigationContainer>
}

export default function App() {

  return (
    <Provider>
      <Container />
    </Provider>
  );
}
